import * as echarts from 'echarts'
import { onMounted, onUnmounted, watch, nextTick } from 'vue'
import { observeResize } from '../compNew/useObserveResize'

const colors = ['#246CF9', '#11CABE']

const Comp = (props: any) => {
  const { id, data, key, yname } = props
  let myChart: echarts.ECharts | null = null
  
  // 初始化图表
  const initChart = () => {
    // 确保容器元素存在
    const chartDom = document.getElementById(id)
    if (!chartDom) return
    
    // 销毁旧实例
    if (myChart) {
      myChart.dispose()
    }
    
    // 初始化新实例
    myChart = echarts.init(chartDom)
    
    const _data = data[key]
    if (!_data) return
    
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#283b56'
          }
        }
      },
      grid: {
        left: 40,
        top: 50,
        bottom: 30,
        right: 20
      },
      legend: {
        textStyle: {
          color: '#ffffff',
          fontSize: 10
        },
        right: 0,
        top: 0,
      },
      xAxis: [
        {
          type: 'category',
          axisLabel: {
            color: 'rgba(255,255,255,0.70)',
            fontSize: 10
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.12)'
            }
          },
          data: _data.xaxisList
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: yname,
          axisLabel: {
            color: 'rgba(255,255,255,0.70)',
            fontSize: 10
          },
          nameTextStyle: {
            color: 'rgba(255,255,255,0.70)',
            fontSize: 10
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.12)'
            },
          },
          // 固定Y轴显示4个刻度
          splitNumber: 4,
        },
      ],
      series: _data.yaxisList.map((item: any, index: any) => {
        return {
          name: item.name,
          type: 'bar',
          barMaxWidth: 15,
          color: colors[index % 2],
          data: item.data
        }
      })
    }
    
    // 设置图表选项
    myChart.setOption(option)
    
    // 首次渲染时强制触发一次重绘
    nextTick(() => {
      if (myChart) {
        myChart.resize()
      }
    })
  }
  
  // 监听容器尺寸变化
  const setupResizeListener = () => {
    if (!myChart) return
    
    observeResize('.board-container', () => {
      if (myChart) {
        myChart.resize({
          animation: {
            duration: 300,
            easing: 'quadraticIn',
          },
        })
      }
    })
  }
  
  // 组件挂载后初始化图表
  onMounted(() => {
    // 等待DOM渲染完成后初始化
    nextTick(() => {
      initChart()
      setupResizeListener()
    })
  })
  
  // 监听数据变化，更新图表
  watch(() => data[key], () => {
    initChart()
  })
  
  // 组件卸载时销毁图表
  onUnmounted(() => {
    if (myChart) {
      myChart.dispose()
      myChart = null
    }
  })
  
  return {}
}

export default Comp